<template>
  <div class="header">
    <div class="container">
  <h1 class="logo">坂井泉水</h1>
  <!-- 导航盒子 -->
  <div class="menu">
   <el-menu
         router
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="/newart"> <i class="el-icon-watch"></i> 最新</el-menu-item>
        <el-menu-item index="/hotart"> <i class="el-icon-sunny"></i> 热门</el-menu-item>
        <el-menu-item index="/allart"> <i class="el-icon-light-rain"></i> 总览</el-menu-item>
        <el-menu-item index="/message"> <i class="el-icon-lightning"></i> 留言</el-menu-item>
        <el-menu-item index="/about"> <i class="el-icon-heavy-rain"></i> 关于</el-menu-item>
        <el-menu-item index="/admin" :route="routePath"> <i class="el-icon-moon"></i> 后台</el-menu-item>
     </el-menu>
  </div>
  <!-- 用户区域 -->
  <div class="control">
    <el-input class="searchbox" v-model="searchVal" size="mini" placeholder="请输入文章标题"></el-input>
        <template v-if="!isLogin">
         <el-button type="primary" size="mini" @click="Opendialog('登陆')">登陆</el-button>
       <el-button type="success" size="mini" @click="Opendialog('注册')">注册</el-button>
        </template>
        <template v-else>
       <el-button type="danger" size="mini" @click="logoutHandler()">退出</el-button>
          <span class="nickname">
            {{userInfo.nickname}}
          </span>
        </template>

  </div>
</div>
<!-- 注册和登陆的模态框 -->
<el-dialog
    :title="type"
    :visible.sync="dialogVisible"
    append-to-body
    width="30%">
    <!-- 实际的表单 -->
<el-form :model="userForm" :rules="rules" ref="userForm" label-width="100px" class="demo-ruleForm" label-position="top">
  <el-form-item label="昵称" prop="nickname" v-if="type=='注册'">
    <el-input v-model="userForm.nickname" clearable></el-input>
  </el-form-item>

  <el-form-item label="用户名" prop="username">
    <el-input v-model="userForm.username" clearable></el-input>
  </el-form-item>

  <el-form-item label="密码" prop="password">
    <el-input v-model="userForm.password" show-password></el-input>
  </el-form-item>
</el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
</el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
  export default {
    data() {
      return {
        searchVal:'',
        dialogVisible:false,
        type:'',
        isLogin:false,
          userForm:{
            nickname:'',
            username:'张不开这嘴',
            password:'88888888'
          },
          rules:{
            nickname: [
            { required: true, message: '请输入您的昵称', trigger: 'blur' },
            { min: 2, max: 8, message: '长度在 4 到 8 个字符', trigger: 'blur' }
          ],
           username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 4, max: 8, message: '长度在 4 到 8 个字符', trigger: 'blur' }
          ],
           password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' }
          ],
          }
      }
    },
    watch:{
      async searchVal(val){
        if (!val) return this.$bus.$emit('onSearch', null)
        const { data } = await this.$http.get('/artQueryAndTitle?title=' + val)
        this.$bus.$emit('onSearch', data.list)
      }
    },
    async mounted() {
      if(this.token){
        this.isLogin=true
      }
    },
    methods: {
      Opendialog(type){
        this.type=type
        this.dialogVisible=true
      },
      logoutHandler(){
          localStorage.clear()
          Vue.prototype.token=''
          Vue.prototype.userInfo=null
          this.isLogin=false
          if(this.$route.path.includes('/admin')) this.$router.push('/newart')
      },
      // 点击注册盒子的确定按钮的逻辑
      submit(){
        const _this=this
        // 得到表单的验证结果
         this.$refs.userForm.validate(async (valid) => {
          if (valid) {
            // 执行登陆或用户注册
            if(_this.type=='注册'){
              // 执行注册用户
              const { status,data } = await _this.$http.post('/userRegister',_this.userForm)
              if(status!=200) return this.$message.error(data.msg)
              this.$message.success(data.msg)
              _this.dialogVisible=false
            }else {
            // 执行登陆请求
              const { status,data } = await _this.$http.post('/userLogin',_this.userForm)
              console.log(status);
             if(status!=200) return this.$message.error(data.msg)
              this.$message.success(data.msg)
              _this.dialogVisible=false
              // 登陆后需要保存token和用户信息
              // 保存到本地  和 保存到Vue原型对象上
              localStorage.token=data.token
              localStorage.userInfo=JSON.stringify(data.userInfo)
              Vue.prototype.token=data.token
              Vue.prototype.userInfo=data.userInfo
              this.isLogin=true
          }
          } 
        });
      }
    },
    computed:{
      activeIndex(){
        return this.$route.path.includes('/admin') ? '/admin' : this.$route.path
      },
      routePath(){
        if(this.isLogin) {
          // console.log(this.userInfo.role);
        return this.userInfo.role==='管理员' ? '/admin/adminPage/user' : '/admin/userPage'
        }else{
          return {
            path:'/admin'
          }
        }

      }
    }
  }
</script>
<style lang="less">
.el-message{
  top:72px !important;
}
  .el-dialog__body{
    padding:0 20px !important;
  }
  .el-form--label-top .el-form-item__label {
    padding: 0 !important;
  }
</style>


<style lang="less" scoped>
@keyframes nicknameShow {
  0%{
    display: none;
    transform: translateX(500px);
  }
  100%{
    display: block;
  }
}
.header{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
  height: 70px;
  z-index: 99999;
  background-color: rgb(84, 92, 100);
}
.container{
  width: 1300px;
  margin: 0 auto;
// background-color: rgb(178, 51, 51);
.logo{
  float: left;
  width: 150px;
  line-height: 70px;
  margin: 0;
  padding: 0;
  font-size: 26px;
  color: rgb(255,208,75);
  font-weight: normal;
}
.menu{
  float: left;
 i{
   color: #fff;
 }
 li{
  height: 70px;
  line-height: 70px;
 }
}
.control{
  height: 70px;
  line-height: 70px ;
  float: right;
  .searchbox{
    width: 230px;
    margin-right: 10px;
    
  }
  .nickname{
    display: inline-block;
      color: #fff;
      font-size: 12px;
      margin-left: 30px;
      animation: nicknameShow .5s;
    }
}
}

</style>